<template>
	<view class="my">
		<view class="my-top">
			<image src="../../static/logo.png" mode=""></image>
			<view class="my-top-name">
				{{name}}
			</view>
		</view>
		<view class="bottom">
			<view class="my-bottom flex" v-for="(item,index) in  content" :key="index" @click="goNew(item.id)">
				<view class="my-left flex">
					<image :src="item.src" mode=""></image>
					<text>{{item.names}}</text>
				</view>
				<view class="my-right last">
					{{item.left}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentId: 0,
				name: 'YAO',
				content: [{
						id: 1,
						src: '../../static/wo.png',
						names: '我的资料',
						left: ">"
					},
					{
						id: 2,
						src: '../../static/jiang.png',
						names: '排行榜',
						left: ">"
					},
					{
						id: 3,
						src: '../../static/lsbs.png',
						names: '历史步数',
						left: ">"
					},
					{
						id: 4,
						src: '../../static/wyqdhy.png',
						names: '我的好友邀请',
						left: ">"
					},
					{
						id: 5,
						src: '../../static/lxkf.png',
						names: '联系客服',
						left: ">"
					},
					{
						id: 6,
						src: '../../static/sqsz.png',
						names: '授权设置',
						left: ">"
					},
					{
						id: 7,
						src: '../../static/yjfk.png',
						names: '意见反馈',
						left: ">"
					},
					{
						id: 8,
						src: '../../static/bbh.png',
						names: '版本号',
						left: "1.1.0"
					}
				],

			}
		},
		onLoad() {
		
		},
		
		methods: {
			goNew: function(id) {
				if (id == 1) {
					uni.navigateTo({
						url: './my-stuff'
					})
				} else if (id == 2) {
					uni.switchTab({
						url: '../rankinglist/paihang'
					})
				} else if (id == 3) {
					uni.navigateTo({
						url: './history-steps'
					})
				} else if (id == 4) {
					uni.navigateTo({
						url: './invite-friends'
					})
				} else if (id == 5) {
					uni.navigateTo({
						url: '#'
					})
				} else if (id == 6) {
					uni.navigateTo({
						url: '#'
					})
				} else if (id == 7) {
					uni.navigateTo({
						url: '#'
					})
				} else {
					uni.navigateTo({
						url: '#'
					})
				}
			},

		}

	}
</script>

<style>
	.my {
		background-color: #f2f2f2;
	}

	.flex {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
	}

	.my-top {
		text-align: center;
		background-color: #f00;
		color: #fff;
		padding-bottom: 10px;
		box-sizing: border-box;
		border-radius: 0 0 10px 10px;
	}
	.bottom{
		width: 95%;
		margin:10px auto;
		border-radius: 5px;
		background-color: #fff;
	}
	.my-bottom {
		padding: 5rpx;
		box-sizing: border-box;
		margin: 10px;
		border-bottom: 1px solid #f2f2f2;
		line-height: 40px;
		font-size: 1.1rem;
		
	}

	.my-top image {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin: 5px 0;
	}

	.my-left image {
		width: 20px;
		height: 20px;
		margin-right: 10rpx;
	}

	.my-right {
		color: #ccc;
	}

	.my-bottom:last-child .my-right {
		font-size: 1rem;
	}
</style>
